<template>
  <div class="cover-mark-container" :class="`${video ? 'aspect-video' : 'aspect-square'}`">
    <el-image :src="picUrl" class="w-full bg-gray-50 object-cover" :alt="name" />
    <div class="cover-mask">
      <IconPark :icon="PlayOne" theme="filled" :size="50" class="text-white icon-park opacity-0 hover:text-teal-400" />
    </div>
    <div v-if="showCount" class="cover-count pt-0.5 pb-0.5">
      <IconPark :icon="Headset" :size="12" />
      <span class="ml-1">{{ formatNumberToCh(playCount) }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import IconPark from '@/components/icon-park/IconPark.vue'
import { PlayOne, Headset } from '@icon-park/vue-next'
import { useFormat } from '@/hooks/useFormat'
const { formatNumberToCh } = useFormat()

interface Props {
  picUrl: string
  name?: string
  playCount?: number
  showCount?: boolean
  video?: boolean
}

withDefaults(defineProps<Props>(), {
  showCount: true,
  playCount: 0,
  video: false,
})
</script>

<style lang="less" scoped>
.cover-mark-container {
  @apply relative cursor-pointer duration-300 rounded-lg overflow-hidden;
  .el-image {
    @apply align-bottom;
  }
  .cover-mask {
    @apply absolute flex items-center justify-center inset-0 bg-black bg-opacity-0;
  }
  .cover-count {
    @apply flex items-center text-xs text-white bg-black bg-opacity-60 pl-2 pr-2 rounded-full absolute bottom-1 right-1 opacity-100;
  }
}
.cover-mark-container:hover {
  @apply -translate-y-1;
  .cover-mask {
    @apply bg-opacity-50;
    .icon-park {
      @apply opacity-100;
    }
  }
  .cover-count {
    @apply opacity-0;
  }
}
</style>
